<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单聊</title>
    <style>
        #chats{
            width:400px;height:300px;border: 1px solid #ccc;float: left;
        }

        #online{
            width:150px;height:300px;border: 1px solid #ccc;background-color:#ccc;float:left;margin-left:20px;
        }

    </style>
    <script src="/webjars/sockjs-client/1.1.2/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/2.3.3/stomp.min.js"></script>
    <script src="/webjars/jquery/3.6.1/jquery.js"></script>
    <script type="text/javascript">
        var stompClient = null;
        function connectWebSocket() { //连接WebSocket
            var url = "http://localhost:8080/webSocket"
            var socket = new SockJS(url);
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                //订阅单个用户发送过来的信息,必须要/user/queue做前缀
                stompClient.subscribe('/user/queue/receiveOne', function (msg) {
                    showMsg(JSON.parse(msg.body));//展示信息
                });
                //同时订阅群发消息
                stompClient.subscribe('/topic/receiveAll', function (data) { //data代表接收服务端发送过来的消息
                    updateUsers(data);//更新用户列表
                });
                //同时发送一条消息给服务器，服务器将广播此条消息，让人知道Ta上线了
                stompClient.send("/app/sendAll",{}, "我来啦");

            });
        }

        function showMsg(message) {//展示信息
            $("#chats").append("<div>" + message.from+":"+message.content + "</div>");
        }

        function updateUsers(data){ //更新用户列表
            var users=JSON.parse(data.body);//转换为JSON对象
            var html="";
            for(var i=0;i<users.length;i++){
                html+="<div onclick='setTo(this)'>"+users[i]+"</div>";
            }
            $("#users").html(html);
        }

        function sendMsg() {//发送信息
            stompClient.send("/app/sendTo", {},
                JSON.stringify({'content':$("#content").val(),'to':$("#to").val()}));
        }

        function setTo(obj){ //设置发送目标，当点击列表中的用户名时触发
            $("#to").val(obj.innerText);
        }

        function checkData(){ //检查发送的数据等是否正确
            if($("#content").val()==""){
                alert("聊天内容不能为空");
                return;
            }
            if($("#to").val()==""){
                alert("发送目标不能为空");
                return;
            }
            //发送目标必须是列表中有的用户
            var listUser=$("#users").text();//列表中有的用户
            var toUser=$("#to").val();//发送目标
            if(listUser.indexOf(toUser)==-1){//列表中是否包含发送目标
                alert("发送目标必须是列表中有的用户");
                return;
            }
        }

        function setCurrentUser(){ //从后台获取当前用户信息
            $.ajax({
                url:"getCurrentUser",
                success:function (data){
                    $("#currentUser").text(data);//用户名显示到标签上
                }
            })
        }

        function closeWebSocket() { //关闭连接
            if (stompClient !== null) {
                stompClient.disconnect();
                //当前用户连接关闭后，后台会监听到并更新最新的用户列表广播给其他用户
            }
            window.location.href="/logout";
        }

        $(function () {
            //连接WebSocket
            connectWebSocket();
            //绑定发送按钮的点击事件
            $("#send").click(function() {checkData(); sendMsg(); $("#content").val("");});
            //设置好当前用户信息
            setCurrentUser();
        });



    </script>
</head>
<body>

<div>
    用户【<span id="currentUser"></span>】说：
    <input type="text" id="content" placeholder="请输入聊天内容">
    发送给：
    <input type="text" id="to" placeholder="目标用户">
    <button id="send" type="button" >发送</button>
    &nbsp; <input type="button" id="disconnect" value="退出聊天" onclick="closeWebSocket()"/>
</div>
<br/>
<div id="chats">
</div>
<div id="online">
    当前在线用户：
    <div id="users">

    </div>
</div>



</body>
</html>